<template>
	<view class="box">
		<view class="context">
			<view class="headImg">
				<image src="http://assessgeek.oss-cn-hangzhou.aliyuncs.com/upload/20200714/0e085860bfcec7f2479e49a9f653c2d18c7bd6a5.png"
				 mode="scaleToFill" style="width: 690rpx; height: 343rpx;"></image>
			</view>

			<view class="modular" v-for="(item,index) in list" :key="item.id">
				<text>{{item.title}}</text>
				<view class="subBox" v-for="(items,indexs) in item.content" :key="items.id" @click="nextPage(index,indexs)">
					<image :src="items.url" mode="scaleToFill" style="width: 360rpx; height: 200rpx;"></image>
					<text class="describe">{{items.describe}}</text>
				</view>
				<view v-if="index == 1" class="tel" @click="makePhone">咨询电话：0571-8770-7527</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				path2: "../my10/profile1/profile1",
				urls: null,
				list: [{
					title: "诊所",
					content: [{
						backgImg: "https://picsum.photos/50/150?random=1",
						describe: "诊所设置",
						url: "http://assessgeek.oss-cn-hangzhou.aliyuncs.com/upload/20200714/41f9bd3c3d4bd1be67da48375d340c88b0ab081c.png",
						backColor: "RGBA(58, 223, 208, 1)"
					}, {
						backgImg: "https://picsum.photos/320/150?random=2",
						describe: "医生管理",
						url: "http://assessgeek.oss-cn-hangzhou.aliyuncs.com/upload/20200714/7a40cddb4552c94a3571f7af3d9a357de0aa09f2.png",
						backColor: "RGBA(142, 185, 251, 1)"
					}, {
						backgImg: "https://picsum.photos/320/150?random=3",
						describe: "消息管理",
						url: " http://assessgeek.oss-cn-hangzhou.aliyuncs.com/upload/20200714/71923ad410ca3e05e196576234104bf0aa38c093.png",
						backColor: "RGBA(255, 189, 133, 1)"
					}, {
						backgImg: "https://picsum.photos/320/150?random=4",
						describe: "项目管理",
						url: "http://assessgeek.oss-cn-hangzhou.aliyuncs.com/upload/20200714/5f67fba027989723931b30b08e2317d1b3f23712.png",
						backColor: "RGBA(255, 217, 121, 1)"
					}]
				}, {
					title: "客户",
					content: [{
						backgImg: "https://picsum.photos/320/150?random=1",
						describe: "客户管理",
						url: "http://assessgeek.oss-cn-hangzhou.aliyuncs.com/upload/20200714/0e7f6f274e0b96e6100565acc41053161d9d9db6.png",
						backColor: "RGBA(150, 191, 252, 1)"
					}, {
						backgImg: "https://picsum.photos/320/150?random=2",
						describe: "预约管理",
						url: "http://assessgeek.oss-cn-hangzhou.aliyuncs.com/upload/20200714/3d2e582f57065fca9ec86e366744d8d906e25176.png",
						backColor: "RGBA(6, 223, 202, 1)"
					}]
				}]
			};
		},
		methods: {
			nextPage(index, indexs) {
				switch (index) {
					case 0:
						switch (indexs) {
							case 0:
								this.urls = "../operation4/setUp1/setUp1";
								break;
							case 1:
								this.urls = "../doctors5/doctorManagement1/doctorManagement1";
								break;
							case 2:
								this.urls = "../message6/messageManagement1/messageManagement1";
								break;
							case 3:
								this.urls = "../project7/projectManagement1/projectManagement1";
								break;
						};
						break;
					case 1:
						switch (indexs) {
							case 0:
								this.urls = "../customer8/customerManagement1/customerManagement1";
								break;
							case 1:
								this.urls = "../appointment9/appointmentManagement1/appointmentManagement1";
								break;
						};
						break;
				};

				// 跳转页面
				uni.navigateTo({
					url: this.urls,
				})
			},

			makePhone() {
				uni.makePhoneCall({
					phoneNumber: '0571-8770-7527'
				})
			},
		},

	}
</script>

<style lang="scss">
	.context {
		margin-bottom: 100rpx;

		.headImg {
			width: 690rpx;
			height: 343rpx;
			overflow: hidden;
			margin: 0 auto;
			margin-bottom: 100rpx;
			margin-top: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.modular {
			width: $calcWidth;
			position: relative;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			margin-top: 70rpx;

			>text {
				position: absolute;
				top: -60rpx;
				left: 35rpx;
				font-size: 30rpx;

				&::after {
					width: 10rpx;
					height: 30rpx;
					content: "";
					border-radius: 10rpx;
					background-color: rgba(45, 209, 188, 1);
					@include chuizhi;
					left: -20rpx;
				}
			}

			.subBox {
				width: 350rpx;
				height: 178rpx;
				position: relative;

				>text {
					display: inline-block;
					position: absolute;
					text-align: right;
					width: 150rpx;
					letter-spacing: 5rpx;
					top: 54%;
					left: 65%;
					transform: translate(-50%, -50%);
					font-size: 32rpx;
					font-weight: 600;
					color: rgba(255, 255, 255, 1);
				}
			}
		}

		.tel {
			color: rgba(153, 153, 153, 1);
			display: inline-block;
			width: 100%;
			text-align: center;
			font-size: 26rpx;
			margin: 60rpx;
		}
	}
</style>
